<template>
   <div class="container">
     <div v-show="extendSwitch" class="extend-container">
       <div v-for="(item,index) in extendContent" :key="index" class="option-items" @click="extendSelected(item.type)">
         <p>{{item.name}}</p>
       </div>
     </div>
     <circle-header :leftType="'TOPICD'" style="position: relative">
       <a slot="right-y" class="more-icon-y iconfont icon-liebiao" @click="openOptions"/>
     </circle-header>
     <div class="tab-container">
       <van-tabs @click="selectType"  color="#075ebb" title-active-color="#0F80F0" title-inactive-color="#999" >
         <van-tab v-for="(item,index) in catalogList" :key="index" :name="item.ttId" :title="item.ttName">
         </van-tab>
       </van-tabs>
     </div>
     <div class="scroller-container">
      <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
        <van-list
        v-model="isLoading"
        :finished="finished"
        :finished-text="(finished&&total>0) ? $t('no_more') : ''"
        loding-text="loading"
        @load="getTopicContent"
        style="padding-bottom: 56px;"
        >
          <div class="content-container" v-for="(item,index) in topicContent" :key="index" @click="jumpDetail(item.tid)">
            <div class="img-title">
              <van-image round class="img" :src="appUrl + item.authorPoto"/>
              <span>{{item.authorName}}</span>
            </div>
            <span v-html="$xss(item.tcontent)"></span>
            <p>{{item.tagName}}</p>
            <div class="bottom-container">
              <div class="options">
                <div>
                  <span class="comment-icon iconfont icon-duihua"></span>
                  <span>{{item.activeDataVO ? item.activeDataVO.commentsCount : 0}}</span>
                </div>
                <div>
                  <span class="iconfont icon-dianzan"></span>
                  <span>{{item.activeDataVO ? item.activeDataVO.likeCount : 0}}</span>
                </div>
              </div>
              <div class="time">
                <span>{{item.tcreateDatetime | substringTime}}</span>
              </div>
            </div>
          </div>
         <common-loading :isLoading="isLoading"></common-loading>
        </van-list>
      </van-pull-refresh>
     </div>
     <!--暂无数据-->
     <div v-if="!isLoading && total <= 0" style="height: 100%">
       <div class="box-table" style="width:100%;height:100%;">
         <div class="box-table-cell" style="text-align: center;">
           <div class="no-data">
             <img src="../../../../static/images/no-data.png" alt=""/>
             <p class="color999">{{ $t("no_data") }}</p>
           </div>
         </div>
       </div>
     </div>
   </div>
</template>

<script>
import CircleHeader from '@/repeatComponents/circleHeader/CircleHeader';
import {Image, Tab, Tabs} from 'vant';
export default {
    name: 'TopicList',
    data() {
        return {
            circleId: this.$route.query.circleId,
            catalogList: [],
            isTop: false,
            total: 0,
            isLoading: false,
            topicContent: [],
            totalPage: 0,
            onFetching: false,
            tagId: 0,
            pageNo: 1,
            role: this.$store.getters.getCircleRole,
            extendSwitch: false,
            extendContent: [
                {name: this.$t('circle282'),
                 type: 'search'}
            ],
            finished: false,
            isRefresh: false
        };
    },
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        CircleHeader,
        [Image.name]: Image
    },
    mounted() {
        this.getCatalogList();
        this.getTopicContent('refresh');
        if (this.role !== 'VISITOR') {
            this.extendContent.unshift(
                {name: this.$t('circle286'),
                 type: 'create'}
            );
        }
    },
    methods: {
        //获取目录数据
        getCatalogList() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/topic-tag/${this.circleId}`
            }).then(res => {
                this.catalogList = this.disposeCatalog(res.data);
            });
        },
        //获取话题数据
        getTopicContent(option) {
            let temp = {
                pageNo: this.pageNo
            };
            if (this.tagId !== 0) {
                temp.tagId = this.tagId;
            }
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/topic/page-list/${this.circleId}`,
                params: temp
            }).then(res => {
                if (option === 'refresh') {
                    this.topicContent = res.data.results;
                } else {
                    this.topicContent = [...this.topicContent, ...res.data.results];
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.topicContent.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        disposeCatalog(list) {
            let temp = {
                ttId: 0,
                ttName: this.$t('type_all_title'),
                currentTag: false
            };
            list.unshift(temp);
            return list;
        },
        selectType(id) {
            this.extendSwitch = false;
            this.tagId = id;
            this.pageNo = 1;
            this.getTopicContent('refresh');
        },
        extendSelected(type) {
            if (type === 'create') {
                this.$router.push({path: '/circle/topic/edit', query: {circleId: this.circleId}});
            }
            if (type === 'search') {
                this.$router.push({path: '/circle/search', query: {votId: this.circleId}});
            }
        },
        openOptions() {
            this.extendSwitch = !this.extendSwitch;
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getTopicContent('refresh');
                this.isRefresh = false;
            }, 900);
        },
        jumpDetail(id) {
            this.$router.push({path: '/circle/topic/detail', query: {id, circleId: this.circleId}});
        }
    }
};
</script>

<style scoped lang="less">
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    .tab-container {
      border-top: #f3f3f3 1px solid;
      line-height: 45px;
    }
    .scroller-container{
      flex: 1;
      height: 100px;
      .content-container{
        background-color: #fff;
        display: flex;
        flex-direction: column;
        padding: 10px 16px 10px 16px;
        margin-top: 12px;
        >span{
          font-size: 12px;
          color: #666;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          padding-bottom: 15px;
        }
        >p{
          display: block;
          width: 50px;
          line-height: 20px;
          text-align: center;
          justify-content: center;
          font-size: 11px;
          color: #fff;
          border-radius: 4px;
          background-color: #97B7D7;
          margin-bottom: 5px;
        }
        .img-title{
          display: flex;
          padding-bottom: 15px;
          .img{
            width: 40px;
            height: 40px;
          }
          >span{
            color: #333;
            line-height: 20px;
            padding-top: 10px;
            padding-left: 10px;
          }
        }
        .bottom-container{
          display: flex;
          justify-content: space-between;
          .options{
            display: flex;
            justify-content: space-between;
            width: 30%;
            .comment-icon{

            }
            >div>span:nth-child(1){
              font-size: 16px;
              color: #ccc;
            }
            >div>span{
              font-size: 12px;
              color: #999;
              line-height: 20px;
              padding-bottom: 4px;
            }
          }
          .time{
            font-size: 12px;
            color: #999;
            line-height: 20px;
          }
        }
      }
    }
  }
  .more-icon-y{
    font-size: 22px;
    // padding: 18px 20px 0 0;
    color: #666 !important;
  }
  .extend-container{
    z-index: 9999;
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 55px;
    width: 25%;
    /*height: max-content;*/
    .option-items{
      /*height: 50px;*/
      border: 1px #eee solid;
      >p{
        /*line-height: 20px;*/
        font-size: 12px;
        color: #333;
        text-align: center;
        padding: 14px 0;
      }
    }
  }

</style>
